<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="600" height="600"></canvas>
</body>
<script type="text/javascript" src="../Charpter-05/requestNextAnimationFrame.js"></script>
<script type="text/javascript" src="../Charpter-06/Sprite.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('canvas'),
		context = canvas.getContext('2d'),

		elapsedTime = undefined, // 逝去的时间
		startTime = undefined, // 开始的时间

		PIVOT_Y = 20, // 轴的Y坐标
		PIVOT_RADIUS = 7, // 轴的半径
		WEIGHT_RADIUS = 25, // 摆球的半径
		INITIAL_ANGLE = Math.PI/5, // 起始角度
		ROD_LENGTH_IN_PIXELS = 300, // 杆的长度
		
	// 	Pendulum painter...............................................
		// 钟摆绘制器
		pendulumPainter = {
			PIVOT_FILL_STYLE: 'rgba(0, 0, 0, 0.2)',
			PIVOT_SHADOW_COLOR: 'rgb(255, 255, 0)',
			WEIGHT_SHADOW_COLOR: 'rgb(0, 0, 0)',
			STROKE_COLOR: 'rgb(100, 100, 195)',

			paint: function(pendulum, context){
				this.drawPivot(pendulum);
				this.drawRod(pendulum);
				this.drawWeight(pendulum, context);
			},

			// 绘制轴
			drawPivot: function(pendulum){
				context.save();

				// 轴心
				context.beginPath();
				context.arc(pendulum.x + pendulum.pivotRadius, pendulum.y, pendulum.pivotRadius/2, 0, Math.PI*2, false);
				context.shadowColor = undefined;
				context.fillStyle = '#fff';
				context.fill();
				context.stroke();

				// 轴外围
				context.beginPath();
				context.arc(pendulum.x + pendulum.pivotRadius, pendulum.y, pendulum.pivotRadius, 0, Math.PI*2, false);
				context.fillStyle = this.PIVOT_FILL_STYLE;
				context.fill();
				context.stroke();

				context.restore();
			},

			// 绘制杆
			drawRod: function(pendulum){
				context.beginPath();
				context.moveTo(
					pendulum.x + pendulum.pivotRadius + pendulum.pivotRadius * Math.sin(pendulum.angle),
					pendulum.y + pendulum.pivotRadius * Math.cos(pendulum.angle)
				);
				context.lineTo(
					pendulum.weightX - pendulum.weightRadius * Math.sin(pendulum.angle),
					pendulum.weightY - pendulum.weightRadius * Math.cos(pendulum.angle)
				);
				context.stroke();
			},

			// 绘制摆球
			drawWeight: function(pendulum, context){
				context.save();

				// 摆球外圆
				context.beginPath();
				context.arc(pendulum.weightX, pendulum.weightY, pendulum.weightRadius, 0, Math.PI*2, false);
				context.clip();
				context.shadowColor = this.WEIGHT_SHADOW_COLOR;
				context.shadowOffsetX = -4;
				context.shadowOffsetY = -4;
				context.shadowBlur = 8;
				context.lineWidth = 2;
				context.strokeStyle = this.STROKE_COLOR;
				context.stroke();

				// 摆球内圆
				context.beginPath();
				context.arc(pendulum.weightX, pendulum.weightY, pendulum.weightRadius/2, 0, Math.PI*2, false);
				context.clip();
				context.shadowColor = this.PIVOT_SHADOW_COLOR;
				context.shadowOffsetX = -4;
				context.shadowOffsetY = -4;
				context.shadowBlur = 8;
				context.stroke();

				context.restore();
			}
		},

	// Swing behavior..............................................................

		// 摇摆行为
		swing = {
			GRAVITY_FORCE: 9.81,
			ROD_LENGTH: 0.8,

			execute: function(pendulum, context, time){
				pendulum.angle = pendulum.initialAngle * Math.cos(Math.sqrt(this.GRAVITY_FORCE / this.ROD_LENGTH) * elapsedTime);
				pendulum.weightX = pendulum.x + Math.sin(pendulum.angle) * pendulum.rodLength;
				pendulum.weightY = pendulum.y + Math.cos(pendulum.angle) * pendulum.rodLength;
			}
		},

	// Pendulum sprite................................................................

		// 钟摆精灵
		pendulum = new Sprite('pendulum', pendulumPainter, [swing]);

// Animation loop.........................................................................
	
	// 动画
	function animate(time){
		elapsedTime = (time - startTime) / 1000;
		context.clearRect(0, 0, canvas.width, canvas.height);
		pendulum.update(context, time);
		pendulum.paint(context);
		window.requestNextAnimationFrame(animate);

	}

// Initialization...........................................................................

	pendulum.x = canvas.width/2;
	pendulum.y = PIVOT_Y;
	pendulum.weightRadius = WEIGHT_RADIUS;
	pendulum.pivotRadius = PIVOT_RADIUS;
	pendulum.initialAngle = INITIAL_ANGLE;
	pendulum.angle = INITIAL_ANGLE;
	pendulum.rodLength = ROD_LENGTH_IN_PIXELS;

	context.lineWidth = 0.5;
	context.strokeStyle = 'rgba(0, 0, 0, 0.5)';
	context.shadowColor = 'rgba(0, 0, 0, 0.5)';
	context.shadowOffsetX = 2;
	context.shadowOffsetY = 2;
	context.shadowBlur = 4;
	context.stroke();

	startTime = + new Date();
	animate(startTime);
</script>
</html>